<template>
    <view class="categories">
        <!-- 左边的scroll-view -->
        <scroll-view :style="{height:(windowHeight-10)+'px;'}" class="categories-left" scroll-y>
            <view @click="toggleSelect(index)" :class="['categories-left-item', index === currentIndex ? 'categories-left-active':'']" v-for="(item,index) in categories" :key="item.cat_id">
                <text>{{item.cat_name}}</text>
            </view>
        </scroll-view>
        <!-- 右边的scroll-view -->
        <scroll-view :enable-back-to-top="true" :style="{height:(windowHeight-10)+'px;'}" class="categories-right" scroll-y>
            <view v-for="item in brandList" :key="item.cat_id">
                <!-- 上面的标题 -->
                <view class="categories-right-item-title">
                    <text>{{item.cat_name}}</text>
                </view>
                <!-- 下面的三级分类 -->
                <view class="categories-right-item-body">
                    <view class="right-body-item" v-for="(subitem,index2) in item.children" :key="index2">
                        <image :src="subitem.cat_icon" alt="" />
                        <text class="right-body-item-title">{{subitem.cat_name}}</text>
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
export default {
    data(){
        return {
            categories:[],//所有的分类数组，包含了一级、二级、三级
            brandList:[],//右边的显示 二级、三级 数据
            currentIndex:0,
            windowHeight:0
        }
    },
    onLoad(){
        this.getCategoriesData()

        this.windowHeight = mpvue.getSystemInfoSync().windowHeight
    },
    methods:{
        async getCategoriesData(){
            const res = await this.$axios.get('categories')

            this.categories = res.data.message

            this.brandList = this.categories[0].children
        },
        // 切换一级分类
        toggleSelect(index){
            this.currentIndex = index

            this.brandList = this.categories[index].children
        }
    }
}
</script>

<style lang="less" scoped>
.categories {
  display: flex;
  margin-top: 10px;
  &-left {
    width: 200rpx;
    display: flex;
    flex-direction: column;
    // justify-content: center;
    align-items: center;
    background-color: #f4f4f4;
    &-item {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 200rpx;
      height: 100rpx;
      position: relative;
    }
    &-active {
      background: #fff;
      &::before {
        position: absolute;
        content: '';
        background-color: #ff2d4a;
        left: 0;
        top: 10rpx;
        width: 5px;
        height: 80rpx;
      }
    }
  }
  &-right {
    flex: 1;
    background-color: white;
    &-item {
      &-title {
        display: flex;
        justify-content: center;
        align-items: center;
        &::before {
          content: '/';
          color: #eeeeee;
          margin-right: 20rpx;
        }

        &::after {
          content: '/';
          color: #eeeeee;
          margin-left: 20rpx;
        }
      }
      &-body {
        display: flex;
        flex-wrap: wrap;
      }
    }
  }
}
image {
  width: 100rpx;
  height: 80rpx;
}
.right-body-item {
  height: 200rpx;
  width: 33.33333%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  &-title{
    margin-top:5rpx;
  }
}
</style>

